<template>
  <div>
    <div class="headBar">
      <el-form  :model="form" inline>
        <el-form-item label="种类类别">
          <el-select v-model="category_type" placeholder="请选择类别" style="width: 150px">
            <el-option
              v-for="item in categoryClassOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别名称">
          <el-input v-model="form.category_name"
                    placeholder="请输入类别名称"
                    prefix-icon="el-icon-search"
                    clearable
                    style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="类别描述">
          <el-input v-model="form.category_describe"
                    placeholder="请输入类别描述"
                    clearable
                    style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="生产建议">
          <el-input v-model="form.suggestion"
                    placeholder="请输入生产建议"
                    clearable
                    style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="Search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" type="success" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="tableData">
        <el-table
          v-loading="loading"
          :data="categories"
          :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
          border
          max-height="520px"
          :row-class-name="tableRowClassName">
          <el-table-column
            label="类别名称"
            prop="category_name"
            width="180">
          </el-table-column>
          <el-table-column
            label="类别描述"
            prop="category_describe"
            width="300">
          </el-table-column>
          <el-table-column
            label="生产建议"
            prop="suggestion"
            width="300">
          </el-table-column>
          <el-table-column label="操作" >
            <template v-slot="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" v-if="isManager" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              <el-button size="mini" v-if="scope.row.category_type === 'air' || scope.row.category_type === 'air_temp'"
                         type="success" @click="seeFeature(scope.row.air_feature)">气流特征</el-button>
              <el-button size="mini" v-if="scope.row.category_type === 'temp' || scope.row.category_type === 'air_temp'"
                         type="warning" @click="seeFeature(scope.row.temp_feature)">热负荷特征</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20,30]"
          :total="totalRows"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="类别特征数据" :visible.sync="DialogView">
      <el-table :data="featureData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="parameter_id" label="特征ID"></el-table-column>
        <el-table-column prop="parameter_mean" label="特征名称"></el-table-column>
        <el-table-column prop="value" label="特征值"></el-table-column>
        <el-table-column prop="parameter_dimension" label="量纲"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="编辑类别" :visible.sync="DialogEdit" width="30%">
      <el-form :model="form2">
        <el-form-item label="类别名称">
          <el-input v-model="form2.category_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别特征描述">
          <el-input v-model="form2.category_describe" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别下生产建议">
          <el-input v-model="form2.suggestion" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ModifyCancel">取 消</el-button>
        <el-button type="primary" @click="ModifyConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "category",
  data() {
    return {
      loading: false,
      DialogEdit: false,
      DialogView:false,
      category_type:'air_temp',
      categoryClassOptions: [
        {
          value: 'air',
          label: '气流类别'
        },
        {
          value: 'temp',
          label: '热负荷类别'
        },
        {
          value: 'air_temp',
          label: '气流热负荷组合'
        },
      ],
      categories: [

      ],
      // maxColHeight: '620px',
      featureData: [
        {
          parameter_id:'1',
          parameter_mean:'炉喉温度',
          value:'320',
          parameter_dimension:'℃',
        },
        {
          parameter_id:'2',
          parameter_mean:'炉喉温度',
          value:'330',
          parameter_dimension:'℃',
        },
      ],
      form: {
        pageNum: 1,
        pageSize: 10,
        category_type: 'air_temp',
        category_name: '',
        category_describe: '',
        suggestion: '',
      },
      form2:{},
      pageNum: 1,
      pageSize: 10,
      totalRows: 1,
      isManager: false,
    }
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row';
      }
    },
    Search(){
      this.pageNum = 1
      this.loadCategory()
    },
    reset(){
      this.form.category_name =  ''
      this.form.category_describe = ''
      this.form.suggestion = ''
      this.loadCategory()
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(this.$httpUrlCategory + '/delete', row).then(res => {
          console.log(res.data)
          res = res.data
          if (res.data.code === 200) {
            this.loadCategory()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(category){
      this.DialogEdit = true
      this.form2 = category
    },
    ModifyCancel(){
      this.DialogEdit = false;
      this.reset()
    },
    ModifyConfirm(){
      this.$axios.post(this.$httpUrlCategory +'/update', this.form2).then(res => {
        res = res.data
        console.log('修改回调信息')
        console.log(res)
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.loadCategory()
          this.DialogEdit = false
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      }).catch(err => {
        this.$message.warning('请求失败')
        this.DialogEdit=false
      })
    },
    seeFeature(feature){
      this.DialogView=true
      this.featureData = feature
    },
    loadCategory() {
      this.loading = true
      this.form.pageNow = this.pageNum
      this.form.pageSize = this.pageSize
      this.form.category_type = this.category_type
      console.log(this.form)
      this.$axios.post(this.$httpUrlCategory +'/getByPage', this.form).then(res => {
        res = res.data
        console.log(res)
        if (res.code === 200) {
          this.categories = res.data.rowData
          this.totalRows = res.data.totalRows
        }else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
        this.loading = false
      }).catch(err => {
        console.log(err);
        this.$message({
          message: '请求失败',
          type: 'error'
        })
        this.loading = false
      })

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = 1
      this.pageSize = val
      this.loadCategory()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.loadCategory()
    },
  },
  mounted() {
    if(sessionStorage.getItem("UserStatue") === '2'){
      this.isManager = true
    }
    this.reset()
    // 每10秒轮询一次
    // TODO:完成编写代码以后，将注释放开
    let intervalId = setInterval(this.loadCategory, 100000);
  }
}
</script>

<style scoped>
.headBar{
  padding: 12px 0px 0px 18px;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.1);
}

.tableData{
  margin: 10px;
}
.cluster-container .Cluster-card {
  flex: 0 0 calc(50% - 10px); /* 每行最多两个，减去间距 */
  max-width: calc(50% - 10px); /* 每行最多两个，减去间距 */
  height: 300px;
  width: 550px;
  margin-bottom: 10px;
  /* 其他样式不变 */
}

</style>
